<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="4" class="leftCol">
        <div class="left-container">
          <!-- 搜索 -->
          <!-- @keyup.enter.native="crud.toQuery" -->
          <el-input
             style="width:100%"
              v-model="queryParams.expectedCareerName"
              clearable
              size="small"
              placeholder="输入职业名称搜索"
              class="filter-item"
              @change="changeName"
              @keyup.enter.native="handleQuery"
            >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="job_list">
              <ul>
                <li v-for="(item ,index) in jobArr" :key="index" @click="professionSearch(item)">
                  <span v-html="highlight(item.dictLabel, queryParams.expectedCareerName)" class="position">{{item.dictLabel}}</span>
                  <span class="description">{{item.remark}}</span>
                </li>
              </ul>
            </div>
        </div>
      </el-col>
      <el-col :span="20" class="rightCol"> 
        <div class="right-container"> 
          <!-- 搜索 -->
          <el-input class="rightSearch"  placeholder="请输入关键词" v-model="queryParams.occupationalLabel" clearable @keyup.enter.native="handleQuery">
            <template slot="prepend">搜人才</template>
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <span class="note">注：按照左侧职业标签搜索</span>
          <div class="search-condition-ex">
            <div class="search-conditions">
              <div class="type">
                <h4 class="title">工作经历：</h4>
                <ul>
                  <li :class="{active: index==isActiveOne}" v-for="(item , index) in workExperienceArr" :key="index" @click="changeClassOne(index,item)">
                    <span>{{item.dictLabel}}</span>
                  </li>
                </ul>
              </div>
              <div class="type">
                <h4 class="title">学历要求：</h4>
                <ul>
                  <li :class="{active: index==isActiveTwo}" v-for="(item , index) in educationArr" :key="index" @click="changeClassTwo(index,item)">
                    <span>{{item.dictLabel}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="resultCount">
            <span>共找到 {{total}} 人</span>
          </div>
          <div class="searchContent" v-loading="loading" v-if="searchList.length>0">
            <div class="person-item" v-for="(item,index) in searchList" :key="index">
              <div class="introduction">
                <div class=name>{{item.username}}</div>
                <div class="info">
                  <div class="experience">{{item.descriptions}}</div> 
                  <div class="notes">
                    <ul>
                      <li v-for="(note,ind) in item.occupationalLabel" :key="ind">{{note}}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="operate">
                <el-button plain>邀面试</el-button>
              </div>
            </div>
          </div>
          <div v-else class="noData">
            <img :src="noDataImg" />
          </div>
          <pagination
          class="searchPag"
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listSearch, getSearch, delSearch, addSearch, updateSearch, exportSearch } from "@/api/enterprise/search";
import { highLightlist } from "@/utils/highlight"

export default {
  name: "Search",
  data() {
    return {
      // 总条数
      total: 3,
      // 搜索平台人才表格数据
      searchList: [],
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        expectedCareerName: '',
        expectedCareerType: null,
        occupationalLabel: '',
        workExperience: '',
        education: '',
      },
      allJobArr: [], //初始的所有职位数据
      jobArr: [], // 搜索展示的职位数据
      workExperienceArr: [],
      educationArr: [],
      isActiveOne: 0,
      isActiveTwo: 0,
      searchList:[
        // {
        //  username: '陈大哥',
        //  exp: '二年工作经验',
        //  noteArr: ['拜访客户','销售','邀约客户'] 
        // },
        //  {
        //  username: '陈大哥',
        //  exp: '二年工作经验',
        //  noteArr: ['拜访客户','销售','邀约客户'] 
        // },
        //  {
        //  username: '陈大哥',
        //  exp: '二年工作经验',
        //  noteArr: ['拜访客户','销售','邀约客户'] 
        // },
      ],
      loading: false, 
      noDataImg: require("../../../assets/images/nodata.png"),
    };
  },
  created() {
    this.getDicts("s_job_list").then(response => { //获取岗位
      this.allJobArr = response.data;
      this.jobArr = this.allJobArr
    });
    this.getDicts("s_work_experience").then(response => { //获取岗位
      let work = [{
        dictLabel: '不限',
        dictValue: '',
      }]
      this.workExperienceArr = work.concat(response.data);
    });
    this.getDicts("s_education").then(response => { //获取岗位
      let edu = [{
        dictLabel: '不限',
        dictValue: '',
      }]
      this.educationArr = edu.concat(response.data);
    });
  },
  mounted(){
    this.handleQuery();
  },
  watch: {
    "queryParams.expectedCareerName"(){
      this.jobArr = [];
      this.allJobArr.forEach(item => {
        if(item.dictLabel.indexOf(this.queryParams.expectedCareerName) >  -1){
          this.jobArr.push(item)
        }
      })
    }
  },
  methods: {
    // 切换工作经历
    changeClassOne(index,item){
      this.isActiveOne = index;
      this.queryParams.workExperience = item.dictValue;
      this.handleQuery();
    },
     // 切换学历要求
    changeClassTwo(index,item){
      this.isActiveTwo = index;
      this.queryParams.education = item.dictValue;
      this.handleQuery();
    },
    // 职业搜索高亮
    highlight(content, keyWord) {
      return highLightlist(content, keyWord)
    },

    // 职业点击
    professionSearch(item){
      this.queryParams.expectedCareerName = item.dictLabel
      this.queryParams.expectedCareerType = item.dictValue
      this.handleQuery();
    },
    // 修改职业名称
    changeName(value){
      if(value){
        return
      }else{
        this.queryParams.expectedCareerName = ''
        this.queryParams.expectedCareerType = null,
        this.handleQuery();
      }
    },

     /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询搜索平台人才列表 */
    getList() {
      this.loading = true;
      console.log("getList")
      console.log(this.queryParams)
      listSearch(this.queryParams).then(response => {
        let arr = response.rows;
        this.searchList = arr.map(item => {
          item.occupationalLabel = item.occupationalLabel ? item.occupationalLabel.split('，') : [];
          let workDesc =  this.workFormat(item.workExperience) ? this.workFormat(item.workExperience) + ' / '  : '';
          let edcDesc = this.edcFormat(item.education) ?  this.edcFormat(item.education) : '';
          let age = item.age ? ' / ' + item.age + '岁' : '';
          item.descriptions = workDesc + edcDesc + age;
          return item
        })
        console.log('this.searchList',this.searchList)
        this.total = response.total;
        this.loading = false;
      });
    },
    // 性别字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex);
    },

    workFormat(val){
      return this.selectDictLabel(this.workExperienceArr, val);
    },
    edcFormat(val){
      return this.selectDictLabel(this.educationArr, val);
    },
   
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.resumeId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加搜索平台人才";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const resumeId = row.resumeId || this.ids
      getSearch(resumeId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改搜索平台人才";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.resumeId != null) {
            updateSearch(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSearch(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const resumeIds = row.resumeId || this.ids;
      this.$confirm('是否确认删除搜索平台人才编号为"' + resumeIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSearch(resumeIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有搜索平台人才数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportSearch(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
<style scoped>
ul{
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
}

.app-container {
  height: calc(100vh - 84px);
}
.el-row{
  height: 100%;
}
.leftCol{
  border-right: 1px solid #EBEBEB;
  height: 100%;
}
/* .rightCol{
  height: 100%;
}
.right-container{
  height: 100%;
  overflow-y: auto;
} */
.left-container{
  height: 100%;
}
.filter-item >>> .el-input__inner{
  width: 100%;
}
.job_list{
  height: calc(100% - 100px);
  overflow-y: auto;
  margin-top: 10px;
}
.job_list ul{
  font-size: 14px;
  margin-top: 10px;
}
.job_list ul li{
  border-bottom: 1px dotted #d9d9d9;
  cursor: pointer;
}
.job_list ul li .position{
  display: inline-block;
  line-height: 40px;
  color: #61687c;
  text-decoration: none;
}

.job_list ul li .description{
  width: 100%;
  display: inline-block;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;		
	text-overflow: ellipsis;
  font-size: 12px;
  line-height: 20px;
}

.job_list ul li:hover{
  color: #18c3b1;
  background-color: #f8f9fb;
}
.right-container .rightSearch{
  width: 600px;
  margin-right: 10px;
}
.note{
  display: inline-block;
  color: red;
  font-size: 12px;
  padding: 5px 5px 5px 50px;
}
.search-condition-ex{
  margin: 20px auto 10px;
  padding: 20px;
  font-size: 14px;
  background-color: #F2F2F2;
  /* color: #333; */
}
.search-conditions{
  line-height: 24px;
}
.search-conditions .type{
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.type .title{
  margin: 6px 10px 6px 0;
  /* color: #999; */
  line-height: 24px;
  width: 80px;
  flex-shrink: 0;
}
.type ul li{
  float: left;
  margin: 6px 0;
  padding: 0 13px;
  line-height: 24px;
  /* color: #666; */
  cursor: pointer;
}
.active{
  color: #027DB4!important;
  text-decoration: none;
}
.resultCount{
  padding: 10px;
  height: 40px;
  background-color: #FEEAE8;
  font-size: 14px;
}
.searchContent{
  margin-top: 10px;
  text-align: left;
  padding: 20px; 
  /* border: 1px solid #e5e5e5; */
  background-color: #FCFCFC;
}
.noData{
  margin-top: 10px;
  padding-top: 80px;
  text-align: center;
  background-color: #f8f8f8;
  min-height: 400px;
}
.person-item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.introduction{
  padding-left: 20px;
  display: flex;
}
.introduction .name{
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
  width: 80px;

}
.introduction .experience{
  font-size: 16px;
  /* color: #666; */
}
.introduction .notes{
  color: #999;
  margin-top: 5px;
}
.notes ul li{
  float: left;
  margin-right: 12px;
  margin-bottom: 10px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #c0c4cc;
  line-height: 21px;
  padding: 0 8px;
  border-radius: 10px;
}
.person-item .operate{
  margin-right: 50px;
  padding-left: 30px;
  /* border-left: 1px dotted #8197a2; */
}
.searchPag{
  margin-bottom: 30px;
}
</style>
